<template>
<div>
  <userItem></userItem>
  <asideRouteTeacher current-page="2-2"></asideRouteTeacher>
  <div id="main">
    <div id="selectBar">
      <el-select v-model="val" filterable  clearable placeholder="根据课程选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.name">
        </el-option>
      </el-select>
    </div>
    <div id="table">
      <el-table
          :data="tableData.filter(data => (!search|| data.course.toLowerCase().includes(search.toLowerCase()) || data.student.toLowerCase().includes(search.toLowerCase()))&&data.course.toLowerCase().includes(val.toLowerCase()))"
          style="width: 100%" stripe="true" border="true" max-height="400" size="big" fit="true" empty-text="暂无数据">
        <el-table-column
            label="学生"
            prop="student" sortable="true" sort-by="number">
        </el-table-column>
        <el-table-column
            label="成绩"
            prop="grade" sortable="true" sort-by="date">
        </el-table-column>
        <el-table-column
            label="课程"
            prop="course" sortable="true" sort-by="string">
        </el-table-column>
        <el-table-column
            align="center">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="搜索课程/学生"/>
          </template>
          <template slot-scope="scope">
            <el-button
                size="small"
                @click="handleGrade(scope.$index, scope.row)" type="warning" circle icon="el-icon-edit"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div>
    <el-dialog
        title="成绩修改"
        :visible.sync="dialogVisible"
        width="30%">
      <span><el-input v-model="input" placeholder="请修改"></el-input></span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
import userItem from "../components/userItem";
import asideRouteTeacher from "../components/asideRouteTeacher";
import request from "../../utils/request";

export default {
  name: "gradesOperate",
  components:{
    userItem,
    asideRouteTeacher
  },
  data(){
    request.post("/api/selectandgrade/teaquery",sessionStorage.getItem("user")).then(res=>{
      console.log(res);
      this.tableData=res.data;
    })
    request.post("/api/course/getCourse",sessionStorage.getItem("user")).then(res=>{
      console.log(res);
      this.options=res.data;
    })
    return {
      dialogVisible:false,
      options:[],
      tableData:[],
      itemData:[],
      val:'',
      search:'',
      input:'',
      currindex:'',
      rules:{
        input:[
          { required: true, message: '请输入!', trigger: 'blur' },
        ]
      }
    }
  },
  methods:{
    handleGrade(index,row){
      this.currindex=index;
      this.dialogVisible=true;
    },
    update(){
      if(isNaN(this.input)||this.input===''){
        this.$message({
          message: '成绩格式错误！',
          type: 'error'
        });
      }else{
        this.tableData.filter(data => (!this.search|| data.course.toLowerCase().includes(this.search.toLowerCase()) || data.student.toLowerCase().includes(this.search.toLowerCase()))&&data.course.toLowerCase().includes(this.val.toLowerCase()))[this.currindex].grade=this.input;
        request.post("/api/selectandgrade/updateitem",this.tableData.filter(data => (!this.search|| data.course.toLowerCase().includes(this.search.toLowerCase()) || data.student.toLowerCase().includes(this.search.toLowerCase()))&&data.course.toLowerCase().includes(this.val.toLowerCase()))[this.currindex]).then(res=>{
          console.log(res);
          this.dialogVisible=false;
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.input='';
        })
      }
    }
  }
}
</script>

<style scoped>
#main{
  position:absolute;
  right: 23%;
  width: 50%;
  margin-top: 30px;
}
#selectBar{
  float: left;
}
#table{
  margin-top: 50px;
}
</style>
